<template>
  <view class="feedback-container">
    <!-- 反馈类型 -->
    <view class="feedback-section">
      <view class="section-title">反馈类型</view>
      <view class="type-list">
        <view 
          class="type-item" 
          v-for="(item, index) in feedbackTypes" 
          :key="index"
          :class="{'active': selectedType === index}"
          @click="selectType(index)"
        >
          {{ item }}
        </view>
      </view>
    </view>
    
    <!-- 反馈内容 -->
    <view class="feedback-section">
      <view class="section-title">反馈内容</view>
      <view class="content-input">
        <u-textarea
          v-model="content"
          placeholder="请详细描述您遇到的问题或建议，以便我们更好地解决和改进"
          :maxlength="500"
          height="300"
          count
        ></u-textarea>
      </view>
    </view>
    
    <!-- 上传图片 -->
    <view class="feedback-section">
      <view class="section-title">上传图片（选填，最多3张）</view>
      <view class="upload-section">
        <u-upload
          :file-list="fileList"
          @afterRead="afterRead"
          @delete="deletePic"
          name="1"
          multiple
          :max-count="3"
          :image-mode="3"
        ></u-upload>
      </view>
    </view>
    
    <!-- 联系方式 -->
    <view class="feedback-section">
      <view class="section-title">联系方式（选填）</view>
      <view class="contact-input">
        <u-input
          v-model="contact"
          placeholder="请留下您的手机号或邮箱，方便我们联系您"
          border="bottom"
        ></u-input>
      </view>
    </view>
    
    <!-- 提交按钮 -->
    <view class="submit-section">
      <u-button type="primary" @click="submitFeedback">提交反馈</u-button>
    </view>
    
    <!-- 反馈记录 -->
    <view class="history-section">
      <view class="history-header">
        <view class="history-title">反馈记录</view>
        <view class="history-more" @click="goHistory">
          查看更多
          <u-icon name="arrow-right" size="28" color="#999"></u-icon>
        </view>
      </view>
      
      <view class="history-list" v-if="historyList.length > 0">
        <view class="history-item" v-for="(item, index) in historyList" :key="index" @click="viewFeedback(item)">
          <view class="item-header">
            <view class="item-type">{{ feedbackTypes[item.type] || '其他问题' }}</view>
            <view class="item-status" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</view>
          </view>
          <view class="item-content">{{ item.content }}</view>
          <view class="item-footer">
            <view class="item-time">{{ item.createtime }}</view>
          </view>
        </view>
      </view>
      
      <u-empty v-else text="暂无反馈记录" mode="list"></u-empty>
    </view>
  </view>
</template>

<script>
import { user } from '@/api/cms'

export default {
  data() {
    return {
      feedbackTypes: ['功能建议', '性能问题', '界面优化', '内容相关', '账号问题', '其他问题'],
      selectedType: 0,
      content: '',
      fileList: [],
      contact: '',
      historyList: []
    }
  },
  onLoad() {
    // 获取用户联系方式
    this.getUserContact()
    
    // 获取反馈历史
    this.getFeedbackHistory()
  },
  methods: {
    // 获取用户联系方式
    async getUserContact() {
      try {
        const { data } = await user.getUserInfo()
        if (data.code === 1) {
          this.contact = data.data.userInfo.mobile || data.data.userInfo.email || ''
        }
      } catch (error) {
        console.error('获取用户联系方式失败', error)
      }
    },
    
    // 获取反馈历史
    async getFeedbackHistory() {
      try {
        const { data } = await user.getFeedbackList({
          page: 1,
          limit: 3
        })
        
        if (data.code === 1) {
          this.historyList = data.data.rows
        } else {
          uni.showToast({
            title: data.msg || '获取反馈历史失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取反馈历史失败', error)
        uni.showToast({
          title: '获取反馈历史失败，请稍后再试',
          icon: 'none'
        })
      }
    },
    
    // 选择反馈类型
    selectType(index) {
      this.selectedType = index
    },
    
    // 上传图片后的回调
    afterRead(event) {
      const { file } = event
      
      // 上传图片
      this.uploadFile(file)
    },
    
    // 上传文件
    async uploadFile(file) {
      try {
        uni.showLoading({
          title: '上传中'
        })
        
        // 模拟上传
        setTimeout(() => {
          // 更新文件状态
          file.status = 'success'
          file.url = file.url || file.path
          
          uni.hideLoading()
        }, 1000)
      } catch (error) {
        uni.hideLoading()
        console.error('上传文件失败', error)
        uni.showToast({
          title: '上传文件失败，请稍后再试',
          icon: 'none'
        })
      }
    },
    
    // 删除图片
    deletePic(event) {
      const { index } = event
      this.fileList.splice(index, 1)
    },
    
    // 提交反馈
    async submitFeedback() {
      if (!this.content.trim()) {
        uni.showToast({
          title: '请输入反馈内容',
          icon: 'none'
        })
        return
      }
      
      try {
        uni.showLoading({
          title: '提交中'
        })
        
        // 准备图片数据
        const images = this.fileList.map(item => item.url)
        
        const params = {
          type: this.selectedType,
          content: this.content,
          images: images,
          contact: this.contact
        }
        
        const { data } = await user.submitFeedback(params)
        
        uni.hideLoading()
        
        if (data.code === 1) {
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          })
          
          // 重置表单
          this.content = ''
          this.fileList = []
          
          // 刷新反馈历史
          this.getFeedbackHistory()
        } else {
          uni.showToast({
            title: data.msg || '提交失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        console.error('提交反馈失败', error)
        uni.showToast({
          title: '提交失败，请稍后再试',
          icon: 'none'
        })
      }
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        pending: '待处理',
        processing: '处理中',
        completed: '已处理',
        closed: '已关闭'
      }
      return statusMap[status] || '未知'
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        pending: 'status-pending',
        processing: 'status-processing',
        completed: 'status-completed',
        closed: 'status-closed'
      }
      return classMap[status] || ''
    },
    
    // 查看反馈详情
    viewFeedback(item) {
      uni.navigateTo({
        url: `/pages_mine/pages/feedback/detail?id=${item.id}`
      })
    },
    
    // 查看更多反馈历史
    goHistory() {
      uni.navigateTo({
        url: '/pages_mine/pages/feedback/history'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.feedback-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.feedback-section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20rpx;
  }
}

.type-list {
  display: flex;
  flex-wrap: wrap;
  
  .type-item {
    padding: 16rpx 30rpx;
    background-color: #f5f5f5;
    border-radius: 30rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    color: #666666;
    
    &.active {
      background-color: #3c9cff;
      color: #ffffff;
    }
  }
}

.content-input {
  background-color: #f9f9f9;
  border-radius: 8rpx;
  padding: 20rpx;
}

.upload-section {
  padding: 20rpx 0;
}

.submit-section {
  padding: 20rpx 0;
}

.history-section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .history-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
  }
  
  .history-more {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #999999;
  }
}

.history-list {
  .history-item {
    padding: 20rpx 0;
    border-bottom: 1px solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
  }
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
  
  .item-type {
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
  }
  
  .item-status {
    font-size: 24rpx;
    padding: 4rpx 12rpx;
    border-radius: 20rpx;
    
    &.status-pending {
      background-color: #909399;
      color: #ffffff;
    }
    
    &.status-processing {
      background-color: #f9ae3d;
      color: #ffffff;
    }
    
    &.status-completed {
      background-color: #5ac725;
      color: #ffffff;
    }
    
    &.status-closed {
      background-color: #909399;
      color: #ffffff;
    }
  }
}

.item-content {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .item-time {
    font-size: 24rpx;
    color: #999999;
  }
}
</style>